<template>

  <div class="loading-wrap" >
    <div v-if="mask" class="mask"></div>
    <div class="text-center loading" ref="my_loading">
      <div class="spinner-border" style="width: 3rem; height: 3rem;color : rgb(255, 255, 61)" role="status">

        <span class="visually-hidden"> Loading</span>

      </div>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { onMounted, ref, reactive} from 'vue'
defineProps({

  mask: { type: Boolean }
})

const my_loading = ref()
const style = reactive({ marginLeft: '0px' })


onMounted(() => {
  style.marginLeft = my_loading.value.clientWidth / 2 * -1 + 'px'
})




</script>

<style lang="scss" scoped>

/* 根据type属性设置不同的背景颜色 */

@keyframes fadeIn{
  0% { opacity: 0; }
  100% { opacity: 1; }

}



.loading-wrap {
  animation: fadeIn 0.6s ease-in-out;

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    background-color: rgba(65, 65, 65,0.6);
  }

  .loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    z-index: 3000;
    display: block;
  }
}

</style>
